import React, {useEffect, useState} from 'react'
import {Form, Button, Input, Modal, Row, Col, message} from 'antd'
import {connect} from 'umi'
import { getScoreWeightsInfo } from '../../service'

const FormItem = Form.Item;

const formLayout = {
  labelCol: {span: 7},
};

const CreateForm = (props) => {

  const {visible, onSubmit, onCancel } = props;
  const [form] = Form.useForm();

  const onFormCancel = () => {
    onCancel();
    form.resetFields();
  };

  const onFinish = async () => {
    form.validateFields().then(r => {
      let fieldsValue = form.getFieldsValue();
      onSubmit({ ...fieldsValue });
      form.resetFields();
    });
  };


  const renderContent = () => {
    return (
      <>
        <Row gutter={24} justify='center' style={{padding: '0 25% 8% 25%', background: '#ffffff'}}>
          <Col span={24} style={{display: 'flex'}}>
            <FormItem label="类型名称：" style={{width: '80%'}} name='programName' validateFirst={true}
                       rules={[{required: true, message: '评分类型不能为空！'}]}>
              <Input style={{width: '100%'}} placeholder="请输入" />
            </FormItem>
          </Col>
        </Row>
      </>
    )
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Button type="primary" onClick={() => onFinish()}>提交</Button>
      </>
    )
  };

  return (
    <Modal
      width='70%'
      destroyOnClose
      title={`新建评分类型`}
      visible={visible}
      footer={renderFooter()}
      onOk={onFinish}
      onCancel={onFormCancel}
      okText="确认"
      cancelText="取消"
    >
      <Form
        {...formLayout}
        form={form}
        style={{paddingTop: '24px'}}
      >
        {renderContent()}
      </Form>

    </Modal>
  )
};

export default connect(({}) => ({

}))(CreateForm)
